<template>
  <div class="news-outer">
    <!-- tabs -->
    <div class="tabs">
      <div
        v-for="(item, idx) in types" :key="item.value" class="tab"
        :class="{active: idx == current}"
        @click="handleClickTap(idx)"
      >
        {{ item.label }}
      </div>
    </div>

    <!-- 资讯列表 -->
    <div v-if="loading" class="loading">
      <van-loading vertical>
        加载中...
      </van-loading>
    </div>
    <template v-else>
      <div v-if="newsList.length" class="news-list">
        <news-item v-for="item in newsList" :key="item.id" :news-data="item" />
        <uni-load-more :status="status" />
      </div>
      <van-empty v-else description="暂无数据" />
    </template>
  </div>
</template>

<script>
import NewsItem from './news-item.vue'
import { getNewsList } from '@/apis/news'

export default {
  components: { NewsItem },
  props: {
    types: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      current: 0,
      loading: true,
      newsList: [{ id: 1, title: '《我国支持科技创新主要税费优惠政策指引》发布', coverFile: 'https://oa.zeweb.org.cn/api/admin/sys-file/zeoa/fb71a47370c247a48dc5dff575888464.png', createTime: '2024-04-11', createBy: '中恩物联', base: '国务院网站' },
        { id: 2, title: '2024年4月1日开始施行 全国重要新规一览', coverFile: 'https://oa.zeweb.org.cn/api/admin/sys-file/zeoa/bce9b5ebe38e4d76a9eeb92d5f717617.png', createTime: '2024-04-03', createBy: '中恩物联', base: '智慧城市' }],
      status: 'noMore',
      pageNo: 1,
      finished: false,
    }
  },
  mounted() {
    this.handleClickTap(0)
  },
  methods: {
    handleClickTap(idx) {
      this.pageNo = 1
      this.current = idx
      this.finished = false
      this.loadNews()
    },
    /** 根据 current 获取资讯列表 */
    async loadNews() {
      try {
        if (this.pageNo === 1) {
          this.loading = true
        } else {
          // this.status = 'loading'
        }
        // await sleep(300)
        // const res = await getNewsList({
        //   pageNo: this.pageNo,
        //   typeId: this.types[this.current].value,
        // })
        // const { records, total } = res

        // if (this.pageNo === 1) {
        //   this.newsList = records
        // } else {
        //   this.newsList = [...this.newsList, ...records]
        // }

        // if (this.newsList.length >= total) {
        //   this.finished = true
        //   this.status = 'noMore'
        // }
      } catch (e) {} finally {
        this.loading = false
      }
    },
    loadMore() {
      if (this.finished) {
        return
      }
      this.pageNo++
      this.loadNews()
    },
  },
}
</script>

<style lang="scss" scoped>
.news-outer {
  margin-top: 15px;

  .tabs {
    display: flex;
    align-items: center;
    column-gap: 20px;

    .tab {
      font-size: 16px;
      font-weight: 400;
      color: #000000;
      line-height: 16px;
      margin-bottom: 17px;
      position: relative;
      transition: all 250ms;

       &::after {
        content: '';
        display: block;
        position: absolute;
        width: 0px;
        height: 2px;
        left: 50%;
        bottom: -7px;
        transform: translateX(-50%);
        background: #739ECA;
        border-radius: 1px;
        transition: all 250ms;
      }

      &.active {
        font-weight: 500;
        &::after {
          width: 16px;
        }
      }
    }
  }

  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
  }
}
</style>
